<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #app {
        width: 600px;
        margin: 10px auto;
      }

      .tb {
        border-collapse: collapse;
        width: 100%;
      }

      .tb th {
        background-color: #0094ff;
        color: white;
      }

      .tb td,
      .tb th {
        padding: 5px;
        border: 1px solid black;
        text-align: center;
      }

      .footer {
        display: flex;
        justify-content: flex-end;
      }

      .active {
        color: red;
      }
    </style>
  </head>

  <body>
    <div id="app">
      <table class="tb">
        <thead>
          <tr>
            <th>Id</th>
            <th>名字</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="item in displayList">
            <td>{{item.id}}</td>
            <td>{{item.name}}</td>
          </tr>
        </tbody>
      </table>

      <div class="footer">
        <div>
          <button :disabled="page === 1" @click="jump(page - 1)">Prev</button>
          <button
            v-for="item in pageCount"
            :class="{active: item === page}"
            @click="jump(item)"
          >
            {{ item }}
          </button>
          <button :disabled="page === pageCount" @click="jump(page + 1)">
            Next
          </button>
        </div>
      </div>
    </div>

    <script type="module">
      import { createApp } from "./lib/vue3.esm.browser.js";

      createApp({
        data() {
          return {
            // 人员数组
            peoples: new Array(99).fill(1).map((item, index) => ({
              id: index,
              name: "张" + index,
            })),

            page: 1, // 用于表示当前是第几页
            pageSize: 10, // 用于表示每页显示的条数
          };
        },

        computed: {
          // 总页数
          //    依赖项  pageSize 、peoples
          pageCount() {
            return Math.ceil(this.peoples.length / this.pageSize);
          },

          // 用于页面展示的人员数据
          //    依赖项  peoples、page、pageSize
          displayList() {
            // 1 this.peoples.slice(0, 10);
            // 2 this.peoples.slice(10, 20);

            const start = (this.page - 1) * this.pageSize;
            const end = this.pageSize * this.page;

            // PS: 能用 splice 嘛？？？
            return this.peoples.slice(start, end);
          },
        },

        methods: {
          jump(num) {
            this.page = num;
          },
        },
      }).mount("#app");
    </script>
  </body>
</html>
